<template>
  <div>
      <h1 v-text="text1"></h1>
      <h1>{{text2}}</h1>
      <h1 v-html="text2"></h1>
      <div class="box" :class="{'red':isRed,'big':isBig}">测试</div>
      <h1>商品列表</h1>
      <div v-for="(item,index) in goodsList" :key="index">
         <p>{{item.goodsName}}</p>
         <p>{{item.goodsPrice}}</p>
         <p>{{item.goodsdsc}}</p>
         <hr/>
      </div>
      <div>
      <van-button size="mini" type="warning" @click="onhandle">单击警告</van-button>
      <van-button size="mini" type="danger" v-on:dblclick="dbhandle">双击危险</van-button>
      <hr/>
      </div>
      <input text="name" placeholder="输入" v-model="inputVal" 
      v-on:input="handleInput"
      v-on:blur="handleOnblur"
      />
      <hr/>
      <router-link to="/">主页</router-link>
      &nbsp;&nbsp;&nbsp;
      <!--带参 to内容是对象-->
      <router-link :to='{path:"/",query:{id:1}}'>带参跳转到主页</router-link>
      <hr/>
      <van-button size="mini" type="primary" v-on:click="handleQuery">query形式传参</van-button>
      <van-button size="mini" type="primary" v-on:click="handleParams">params形式传参</van-button>
  </div>
</template>

<script lang='ts'>
interface IGoods{
  goodsName:string,
  goodsPrice:number,
  goodsdsc:string
}
import {Vue,Options} from 'vue-class-component'
import {useRoute,useRouter} from 'vue-router'
@Options({
  components:{
  }
})
export default class AboutView extends Vue{
  

  route = useRoute() //用来获取路由对象的数据
  router = useRouter() //路由对象，用来进行路由跳转


  /* 类名绑定:v-text\v-html\v-bind*/
  /* 判断: v-if/v-else/v-if v-else-if v-else v-show*/
  /*声明变量*/
  text1:string="小明"
  text2:string="<i>标题</i>"
  isRed:boolean=true
  isBig:boolean=true
  inputVal:string=""
  
  /*商品数组*/
  goodsList:IGoods[]=[
    {
      goodsName:"商品名称1",
      goodsPrice:100,
      goodsdsc:"商品介绍1"
    },
    {
      goodsName:"商品名称2",
      goodsPrice:200,
      goodsdsc:"商品介绍2"
    },
    {
      goodsName:"商品名称3",
      goodsPrice:300,
      goodsdsc:"商品介绍3"
    },
    {
      goodsName:"商品名称4",
      goodsPrice:400,
      goodsdsc:"商品介绍4"
    }
  ]
   
  


  /*事件绑定*/
  onhandle():void{
    alert('onhandle')
  }
  dbhandle():void{
    console.log('触发')
    alert('dbhandle')
  }
  handleInput():void{
    console.log('handleInput'+this.inputVal)
  }
  handleOnblur():void{
    console.log('handleOnblur'+this.inputVal)
  }

  /*传参事件*/
  handleQuery(){
    this.router.push({
       path:'/',
       query:{
         queryType:'queryType'
       }
    })
  }
  handleParams(){
    /*params传参，必须是name属性，而不能使用path*/
    this.router.push({
      name:'home',
      params:{
        paramsType:'paramsType'
      }
    })
  }
}
</script>

<style scoped lang='scss'>
</style>